<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading System Dashboard</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Boxicons -->
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- TradingView Lightweight Charts -->
    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class='bx bx-trending-up'></i>
                Trading System
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" data-page="dashboard" href="#">
                            <i class='bx bx-home'></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-page="strategies" href="#">
                            <i class='bx bx-cog'></i> Strategies
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-page="portfolio" href="#">
                            <i class='bx bx-wallet'></i> Portfolio
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-page="charts" href="#">
                            <i class='bx bx-bar-chart-alt-2'></i> Charts
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-page="analysis" href="#">
                            <i class='bx bx-analyse'></i> Analysis
                        </a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class='bx bx-user'></i> Admin
                        </a>
                        <ul class="nav-item dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class='bx bx-cog'></i> Settings</a></li>
                            <li><a class="dropdown-item" href="#"><i class='bx bx-log-out'></i> Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container-fluid mt-3">
        <!-- Dashboard Page -->
        <div id="dashboard-page" class="page active">
            <!-- System Status Row -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class='bx bx-server text-success' style="font-size: 2rem;"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="card-title mb-1">System Status</h6>
                                    <h4 class="mb-0" id="system-status">Running</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class='bx bx-trending-up text-primary' style="font-size: 2rem;"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="card-title mb-1">Active Strategies</h6>
                                    <h4 class="mb-0" id="active-strategies">3</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class='bx bx-transfer text-warning' style="font-size: 2rem;"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="card-title mb-1">Total Trades</h6>
                                    <h4 class="mb-0" id="total-trades">1,250</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class='bx bx-wallet text-info' style="font-size: 2rem;"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="card-title mb-1">Portfolio Value</h6>
                                    <h4 class="mb-0" id="portfolio-value">$125,000</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Row -->
            <div class="row mb-4">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-line-chart'></i> Equity Curve
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="equity-chart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-pie-chart-alt-2'></i> Portfolio Allocation
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="allocation-chart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity and Trades -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-time'></i> Recent Activity
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="recent-activity" class="activity-list">
                                <!-- Activity items will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-transfer'></i> Recent Trades
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Time</th>
                                            <th>Symbol</th>
                                            <th>Side</th>
                                            <th>Price</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recent-trades">
                                        <!-- Trade rows will be loaded here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Strategies Page -->
        <div id="strategies-page" class="page">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-cog'></i> Trading Strategies
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="strategies-list" class="row">
                                <!-- Strategy cards will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-plus'></i> Create Strategy
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="strategy-form">
                                <div class="mb-3">
                                    <label class="form-label">Strategy Name</label>
                                    <input type="text" class="form-control" id="strategy-name" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Strategy Type</label>
                                    <select class="form-select" id="strategy-type" required>
                                        <option value="">Select Type</option>
                                        <option value="momentum">Momentum</option>
                                        <option value="value">Value</option>
                                        <option value="mean-reversion">Mean Reversion</option>
                                        <option value="multi-factor">Multi-Factor</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Symbols</label>
                                    <input type="text" class="form-control" id="strategy-symbols" placeholder="AAPL,GOOGL,MSFT">
                                </div>
                                <button type="submit" class="btn btn-primary" id="save-strategy">
                                    <i class='bx bx-save'></i> Save Strategy
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Portfolio Page -->
        <div id="portfolio-page" class="page">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-wallet'></i> Portfolio Overview
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="portfolio-overview">
                                <!-- Portfolio data will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-bar-chart-alt-2'></i> Performance Metrics
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="performance-metrics">
                                <!-- Performance metrics will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Page -->
        <div id="charts-page" class="page">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class='bx bx-bar-chart-alt-2'></i> Market Charts
                                </h5>
                                <div class="d-flex gap-2">
                                    <input type="text" class="form-control form-control-sm" id="symbol-input" placeholder="Symbol (e.g., AAPL)" style="width: 150px;">
                                    <select class="form-select form-select-sm" id="timeframe-select" style="width: 120px;">
                                        <option value="1d">1 Day</option>
                                        <option value="1w">1 Week</option>
                                        <option value="1m">1 Month</option>
                                        <option value="3m">3 Months</option>
                                        <option value="6m">6 Months</option>
                                        <option value="1y" selected>1 Year</option>
                                    </select>
                                    <button class="btn btn-primary btn-sm" id="load-chart-btn">
                                        <i class='bx bx-refresh'></i> Load
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="chart-container" style="height: 500px;">
                                <!-- K线图将在这里显示 -->
                                <div id="candlestick-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Technical Indicators -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-line-chart'></i> Technical Indicators
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-sma" checked>
                                        <label class="form-check-label" for="show-sma">SMA</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-ema" checked>
                                        <label class="form-check-label" for="show-ema">EMA</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-rsi">
                                        <label class="form-check-label" for="show-rsi">RSI</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-macd">
                                        <label class="form-check-label" for="show-macd">MACD</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-info-circle'></i> Chart Info
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="chart-info">
                                <p><strong>Symbol:</strong> <span id="current-symbol">-</span></p>
                                <p><strong>Current Price:</strong> <span id="current-price">-</span></p>
                                <p><strong>Change:</strong> <span id="price-change">-</span></p>
                                <p><strong>Volume:</strong> <span id="current-volume">-</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Analysis Page -->
        <div id="analysis-page" class="page">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-brain'></i> AI Analysis
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="sentiment-form">
                                <div class="mb-3">
                                    <label class="form-label">Text for Sentiment Analysis</label>
                                    <textarea class="form-control" id="sentiment-text" rows="4" placeholder="Enter news text, social media posts, or market commentary..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class='bx bx-analyse'></i> Analyze Sentiment
                                </button>
                            </form>
                            
                            <div id="sentiment-results" class="mt-3" style="display: none;">
                                <!-- Sentiment analysis results will be shown here -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-trending-up'></i> Market Analysis
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="market-analysis-form">
                                <div class="mb-3">
                                    <label class="form-label">Symbol</label>
                                    <input type="text" class="form-control" id="market-symbol" placeholder="AAPL">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Analysis Type</label>
                                    <select class="form-select" id="analysis-type">
                                        <option value="technical">Technical Analysis</option>
                                        <option value="fundamental">Fundamental Analysis</option>
                                        <option value="sentiment">Sentiment Analysis</option>
                                        <option value="risk">Risk Assessment</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class='bx bx-search'></i> Analyze Market
                                </button>
                            </form>
                            
                            <div id="market-results" class="mt-3" style="display: none;">
                                <!-- Market analysis results will be shown here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Backtest Section -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class='bx bx-test-tube'></i> Strategy Backtest
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="backtest-form">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label">Strategy</label>
                                        <select class="form-select" id="backtest-strategy" required>
                                            <option value="">Select Strategy</option>
                                            <option value="momentum">Momentum Strategy</option>
                                            <option value="value">Value Strategy</option>
                                            <option value="mean-reversion">Mean Reversion</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Start Date</label>
                                        <input type="date" class="form-control" id="backtest-start" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">End Date</label>
                                        <input type="date" class="form-control" id="backtest-end" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Initial Capital</label>
                                        <input type="number" class="form-control" id="backtest-capital" value="100000" required>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-success">
                                        <i class='bx bx-play'></i> Run Backtest
                                    </button>
                                </div>
                            </form>
                            
                            <div id="backtest-results" class="mt-4" style="display: none;">
                                <!-- Backtest results will be shown here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-content">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2" id="loading-text">Loading...</p>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Main App JS -->
    <script src="/static/js/app.js"></script>
</body>
</html> 
</body>
</html> 
</html> 